<template>
	<view class="my-message">
		<view class="my-message-box">
			<view class="my-message-con">
				<view class="my-message-con-left">
					<text>头像</text>
					<button class="choose-avatar-btn">
						<image src="/static/images/touxiang.png" mode=""></image>
					</button>
				</view>
				<view class="my-message-con-right">
					<image src="/static/images/xia.png" mode=""></image>
				</view>
			</view>
			<view class="my-message-con-two">
				<view class="my-message-con-left">
					<text>昵称</text>

					<input type="text" placeholder="请输入昵称">
				</view>
				<view class="my-message-con-right">
					<image src="/static/images/xia.png" mode=""></image>
				</view>
			</view>
			<view class="my-message-con-three">
				<view class="my-message-con-left">
					<text>性别</text>
					<text>{{isNavS?'请选择性别':sex}}</text>
					
				</view>
				<view class="my-message-con-right" @click="showS=true">
					<image src="/static/images/xia.png" mode=""></image>
				</view>
			</view>
			<view class="my-message-con-four">
				<view class="my-message-con-left">
					<text>电话</text>
					<input type="text" placeholder="请输入电话">
				</view>
				<view class="my-message-con-right">
					<button>绑定手机号</button>
				</view>
			</view>
			<view class="my-message-con-five">
				<view class="my-message-con-left">
					<text>生日</text>

					<text>{{isNav?'请选择时间':formatDate}}</text>
				</view>
				<view class="my-message-con-right" @click="show=true">
					<image src="/static/images/xia.png" mode=""></image>
				</view>
				
			</view>
			<view class="">
				<u-datetime-picker :show="show" v-model="value1" mode="date"
					@confirm="btnShow(value1)"></u-datetime-picker>
			</view>
			<view class="">
				<u-picker @confirm="btnShowS" :show="showS" :columns="columns"></u-picker>
			</view>
		</view>
		<view class="my-messag-save">
			<button>保存</button>
		</view>
		<u-picker></u-picker>
		<u-datetime-picker></u-datetime-picker>
	</view>
</template>

<script>
	export default {


		data() {
			return {
				show: false,
				value1: Number(new Date()),
				showTime: '',
				isNav: true,
				isNavS: true,
				showS: false,
				sex:'',
				columns: [
					['男', '女']
				],

			};
		},
		computed: {
			formatDate() {
				const date = new Date(this.showTime);
				const year = date.getFullYear();
				const month = this.padZero(date.getMonth() + 1); // 月份从0开始，需要加1，并在前面补0
				const day = this.padZero(date.getDate()); // 日需要在前面补0
				return `${year}-${month}-${day}`;
			},
		},
		methods: {
			btnShow(value1) {
				console.log(value1);
				this.showTime = value1
				this.isNav = false
				this.show = false

			},
			padZero(num) {
				return num < 10 ? `0${num}` : num;
			},
			btnshowS(columns){
					this.showS=true
			
			},
			btnShowS(e){
				this.sex=e.value[0];
					this.isNavS = false
				this.showS=false
			}









		}
	}
</script>

<style lang="scss">
	.my-message {


		.my-message-box {
			box-sizing: border-box;
			padding: 24rpx;

			.my-message-con {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 28rpx;
				border-bottom: 4rpx solid #F3F4F6;

				.my-message-con-left {
					display: flex;
					align-items: center;

					text {
						font-size: 28rpx;
						font-weight: 400;
						color: #606266;
					}

					image {
						width: 122rpx;
						height: 122rpx;
						border-radius: 50%;
					}

					.choose-avatar-btn {
						margin-left: 58rpx;
						padding: 0;
						background-color: transparent;
						border: none;
						outline: none;
						border-radius: 50%;
						width: 122rpx;
						height: 122rpx;
					}
				}

				.my-message-con-right {
					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}

			.my-message-con-two {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 4rpx solid #F3F4F6;

				.my-message-con-left {
					display: flex;
					align-items: center;
					margin-top: 32rpx;
					padding-bottom: 48rpx;

					text {
						height: 50rpx;
						line-height: 50rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #606266;
						margin-right: 58rpx;
					}

					.my-message-con-left-name {
						font-size: 28rpx;
						font-weight: 400;
						color: #303133;
					}

				}

				.my-message-con-right {
					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}

			.my-message-con-three {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 48rpx;
				padding-bottom: 46rpx;
				border-bottom: 4rpx solid #F3F4F6;

				.my-message-con-left {
					display: flex;
					align-items: center;

					text {
						font-size: 28rpx;
						font-weight: 400;
						color: #606266;
						margin-right: 58rpx;
					}

					.my-message-con-left-name {
						font-size: 28rpx;
						font-weight: 400;
						color: #303133;
					}

				}

				.my-message-con-right {
					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}

			.my-message-con-four {
				display: flex;
				// justify-content: space-between;

				margin-top: 48rpx;
				align-items: center;
				padding-bottom: 46rpx;
				border-bottom: 4rpx solid #F3F4F6;

				.my-message-con-left {
					display: flex;
					align-items: center;

					text {
						font-size: 28rpx;
						font-weight: 400;
						color: #606266;
						margin-right: 58rpx;
						// padding-bottom: 48rpx;

					}

					.my-message-con-left-name {
						font-size: 28rpx;
						font-weight: 400;
						color: #303133;
					}

				}

				.my-message-con-right {

					// padding-bottom: 46rpx;
					// margin-top: 46rpx;
					button {
						width: 212rpx;
						height: 58rpx;
						line-height: 58rpx;
						background: #40C6A1;
						font-size: 28rpx;
						font-weight: 400;
						color: #F3F4F6;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
					}
				}
			}

			.my-message-con-five {
				display: flex;
				justify-content: space-between;
				margin-top: 46rpx;

				.my-message-con-left {
					display: flex;
					align-items: center;

					text {
						font-size: 28rpx;
						font-weight: 400;
						color: #606266;
						margin-right: 58rpx;
						padding-bottom: 48rpx;
					}

					.my-message-con-left-name {
						font-size: 28rpx;
						font-weight: 400;
						color: #303133;
					}

				}

				.my-message-con-right {
					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}

		}

		.my-messag-save {
			width: 750rpx;
			position: fixed;
			bottom: 62rpx;
			text-align: center;

			button {
				width: 654rpx;
				height: 96rpx;
				line-height: 96rpx;
				font-size: 36rpx;
				color: #F3F4F6;
				background: #40C6A1;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
			}
		}
	}
</style>